<template>
  <div class="rating-select">
    <div class="rating-type f0 border-1px-bottom">
      <p class="type all"
         :class="{'active':selectType===2}"
         @click.stop="setType($event,2)">
        <span class="text">{{desc.all}}</span>
        <strong class="num">{{ratings.length}}</strong>
      </p>
      <p class="type positive"
         :class="{'active':selectType===0}"
         @click.stop="setType($event,0)">
        <span class="text">{{desc.positive}}</span>
        <strong class="num">{{positives.length}}</strong>
      </p>
      <p class="type negative"
         :class="{'active':selectType===1}"
         @click.stop="setType($event,1)">
        <span class="text">{{desc.negative}}</span>
        <strong class="num">{{negatives.length}}</strong>
      </p>

    </div>
    <div class="switch"
         :class="{'on':onlyContent}">
      <i class="icon-check_circle icon f25"
         @click.stop="toggleContent"></i>
      <span class="text f14 fw500">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;

export default {
  'name': '',
  'props': {
    'ratings': {
      'type': Array,
      'default': []
    },
    'selectType': {
      'type': Number,
      'default': ALL
    },
    'onlyContent': {
      'type': Boolean,
      'default': false
    },
    'desc': {
      'type': Object,
      default() {
        return {
          'all': '全部',
          'positive': '满意',
          'negative': '不满意'
        };
      }
    }
  },
  data() {
    return {};
  },
  'components': {},
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {
    positives() {
      return this.ratings.filter(ele => {
        return ele.rateType === POSITIVE;
      });
    },
    negatives() {
      return this.ratings.filter(ele => {
        return ele.rateType === NEGATIVE;
      });
    }
  },
  'methods': {
    setType(event, type) {
      if (!event._constructed) return;
      this.$emit('setType', type);
    },
    toggleContent(event) {
      if (!event._constructed) return;
      this.$emit('toggle');
    }
  },
  'watch': {}
};
</script>

<style lang='stylus' scoped>
@import '../../common/stylus/mixin.styl'
.rating-select
  .rating-type
    padding(18, 0, 18, 0)
  .rating-type, .switch
    margin(0, 18, 0, 18)
  .rating-type
    border-1px-bottom(rgba(7, 17, 27, 0.2))
    .positive, .all
      background-color rgba(0, 160, 240, 0.2)
    .negative
      background-color rgba(77, 85, 93, 0.2)
    p
      display inline-block
      padding(10, 12, 10, 12)
      color rgb(77, 85, 93)
      margin-right 8px
      text-align center
      font-weight 600
      border-radius 2px
      cursor pointer
      strong
        font-size 8px
        vertical-align middle
      span
        margin-right 2px
        font-size 12px
        vertical-align bottom
      &.active
        color rgb(255, 255, 255)
      &.positive.active, &.all.active
        background-color rgb(0, 160, 240)
      &.negative.active
        background-color rgb(77, 85, 93)
  .switch
    padding(7, 0, 7, 0)
    .icon
      display inline-block
      padding(5, 5, 5, 5)
      box-sizing border-box
    &.on
      .icon
        color #00b43c
    color rgb(147, 153, 159)
    .text, i
      display inline-block
      margin-left 4px
      vertical-align middle
</style>
